<template>
    <div class="good-buy" v-if="goodInfo">
            <!--<div class="good-buy-get">-->
                  <!--<span>收货人：{{deliveryNmae}}</span>-->
                  <!--<span class="fr">{{deliveryPhone}}</span>-->
            <!--</div>-->
            <!--<div class="good-buy-address right-arrow">-->
                    <!--<span>收货地址：{{deliveryAddress}}</span>-->
                    <!--<p></p>-->
            <!--</div>-->
            <v-form :model="form" :items="items" class="address-form"></v-form>
            <good-info
                :goodPic="goodInfo.goodsSpecList[0].specImgUrl"
                :goodsName="goodInfo.goodsName"
                :specType="specType"
                :spec="spec"
                :goodsPrice="specPrice"
                :goodsNum="goodsNum"
            />
            <div class="good-buy-send vux-1px-b">
                  <span>配送方式</span>
                  <span class="fr">快递  免邮</span>
            </div>
            <div class="good-buy-total">
                  共{{goodsNum}}件商品&nbsp;&nbsp;&nbsp;&nbsp;小计：<span class="price"><span>¥</span>{{goodsNum*specPrice}}</span>
            </div>

            <div class="good-buy-set">
                    <p>合计金额：<span class="price"><span>¥</span>{{goodsNum*specPrice}}</span></p>
                    <x-button class="buy-btn" @click.native="buyBtn">去结账</x-button>
            </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import goodInfo from '../components/goodInfo.vue'
    import vForm from '@/components/v-form'
    export default {
      name: "good-buy",
      components:{
        goodInfo,
        vForm
      },
      data(){
        return{
          form:{
            deliveryNmae:'',
            deliveryPhone:'',
            deliveryAddress:''
          },
          items:[
            {
              prop:'deliveryNmae',
              type:'input',
              label:'姓名',
              placeholder:'请输入收货人姓名',
              required:true
            },
            {
              prop:'deliveryPhone',
              type:'input',
              label:'手机',
              placeholder:'请输入收货人手机',
              required:true
            },
            {
              prop:'deliveryAddress',
              type:'textarea',
              label:'地址',
              placeholder:'请输入收货地址'
            },

          ],
          goodsNum:'',
          specType:'',
          spec:'',
          specPrice:'',
          specId:'',

        }
      },
      computed:{
        goodInfo(){
          return this.$store.state.good.goodInfo
        }

      },
      methods:{
        ...mapActions([
            'queryGetGoodInfo',
            'queryGetOrderList'
          ]),
         buyBtn(){
          this.$vux.loading.show()
          let params = {
            specId:this.specId,
            spec:this.spec,
            goodsNum:this.goodsNum,
            openId:sessionStorage.getItem('openId'),
            supplierId:this.goodInfo.merchId,
            ...this.form

          }
          console.log(params)
           let self = this
           let keys = Object.keys(this.form)
           let validate = keys.map(item=>{
             return new Promise((resolve,reject)=>{
               if(this.form[item]){
                 resolve()
               }else{
                 reject()
               }
             })
           })
           Promise.all(validate).then(()=>{
             this.$axios.post(this.$store.state.orderPay,params).then(res=>{
               this.Util.wechatPay(res.data,function () {
                 self.$router.replace({name:'GoodOrder'})
                 self.queryGetOrderList(params)
               })

             })
           }).catch(e=>{
             this.$vux.toast.text('请填写收货信息！', 'top')
             console.log(e)
           }).finally(()=>{
             this.$vux.loading.hide()
           })

        },

      },

      mounted(){
        let buyInfoObj = JSON.parse(sessionStorage.getItem('buyInfo'))
        for (let attr in buyInfoObj){
          this[attr] = buyInfoObj[attr]
        }

        if(!this.goodInfo){
            this.$vux.loading.show()
            this.queryGetGoodInfo(sessionStorage.getItem('goodsId')).catch(e=>{
              console.log(e)
            }).finally(()=>{
              this.$vux.loading.hide()
            })
          }
      }
    }
</script>

<style lang="less" scoped>
@import '../assets/style/test.css';

</style>
